<template>
	<el-scrollbar :class="['app-content content card__content--full', $route.meta.contentClass]" :native="false">
		<div>
			<div class="content-overlay" />
			<div class="header-navbar-shadow" />
			<div class="content-wrapper">
				<slot name="breadcrumb"> </slot>
				<div class="content-body">
					<router-view v-slot="{ Component }">
						<Suspense>
							<transition :name="routerTransition" mode="out-in">
								<main>
									<component :is="Component" />
								</main>
							</transition>
						</Suspense>
					</router-view>
				</div>
			</div>
		</div>
	</el-scrollbar>
</template>

<script>
import { appStore as useAppConfig } from "@/stores/modules/app";

export default {
	setup() {
		const {
			layout: { routerTransition }
		} = useAppConfig();

		return {
			routerTransition
		};
	}
};
</script>

<style></style>
